<template>
  <div class="authentication-channel">
    <!-- 个人资料 -->
    <van-nav-bar class="navtop" title="管理员认证">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <div class="touxiang">
      <!-- 头像 -->
      <van-image round class="img" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <!-- 姓名 -->
      <span class="uname">黑马家政</span>
    </div>
    <div class="Card">
      <span class="tcontent">请输入您的用户名和密码进行认证</span>
      <!-- 清除浮动 -->
      <div class="clear"></div>
      <div class="line" />
      <van-form>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="username"
          name="uaccount"
          label="用户账户:"
          :rules="[{ required: true, message: '请填写用户账户' }]"
          maxlength="6"
        />
      </van-form>
      <div class="line" />
      <van-form>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="userpassword"
          name="upassword"
          type="password"
          label="用户密码:"
          :rules="[{ required: true, message: '请填写用户密码' }]"
        />
      </van-form>
      <div class="line" />
    </div>
    <!-- 提交认证 -->
    <button class="Submit" @click="renzhen()">提交认证</button>
  </div>
</template>

<script>
export default {
  name: 'AuthenticationChannel',
  components: {},
  props: {},
  data () {
    return {
      username: '',
      userpassword: ''
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file)
    },
    renzhen () {
      if (this.userpassword !== '123456' || this.username !== '干饭王') {
        return this.$toast.fail('认证失败!')
      }
      this.$toast.success('认证成功!')
      this.$router.push('/my')
    }
  }
}
</script>

<style scoped lang="less">
.authentication-channel {
  .clear {
    display: block;
    clear: both;
  }
  .navtop {
    background-color: #3f51b5;
    /deep/.van-nav-bar__title {
      font-size: 32px;
      color: #fff;
      font-weight: 700;
      margin-left: 72px;
    }
  }
  .van-nav-bar .van-icon {
    font-size: 36px;
    color: #fff;
  }
  .touxiang {
    height: 300px;
    background-color: #3f51b5;
    flex-direction: column;
    display: flex;
    align-items: center;
    .img {
      width: 100px;
      height: 100px;
      margin: 10px 0;
    }
    .uname {
      font-size: 28px;
      font-weight: 700;
      color: #fff;
    }
  }
  .Card {
    position: absolute;
    left: 5%;
    top: 25%;
    width: 90%;
    height: 65%;
    line-height: 40px;
    border-radius: 16px;
    background-color: #fff;
    .line {
      height: 2px;
      background-color: #eeecec;
    }
    .tcontent {
      font-size: 28px;
      color: #27105d;
      display: block;
      margin: 30px 0 50px;
      padding-left: 30px;
      float: left;
    }
    .tcontent::before {
      display: block;
      content: "";
      width: 10px;
      height: 32px;
      background-color: #3f51b5;
      float: left;
      margin-right: 10px;
    }
    .van-form {
      height: 140px;
      /deep/span {
        color: #27105d;
      }
    }
  }
  .Submit {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 0;
    background-color: #3f51b5;
    width: 100%;
    height: 100px;
    font-size: 28px;
    color: #ffffff;
    font-weight: 700;
  }
  .van-hairline--bottom::after {
    border: none;
  }
}
</style>
